const path = require("path");
const fs = require("fs");
const { createCanvas, loadImage } = require("canvas");
const svgDir = path.join(__dirname, "amazingSVG");
// 获取背景图片__dirname/bg.jpeg
const bgImagePath = path.join(__dirname, "bg.jpeg");
/**
 * 绘制svg到背景图片,输出绘制后的图片路径
 */
async function drawSvg2BackgroundImage() {  
  // 将图片保存在path.join(__dirname,'bg_with_svg.jpeg');
  const outputPath = path.join(__dirname, "bg_with_svg.jpeg");
  // 如果目标图片存在且创建时间在五分钟内，则直接返回路径。
  if (fs.existsSync(outputPath)) {
    const stat = fs.statSync(outputPath);
    const now = new Date();
    const fiveMinutesAgo = new Date(now.getTime() - 5 * 60 * 1000);
    if (stat.ctime > fiveMinutesAgo) {
      console.log("  >> 目标图片已存在且创建时间在五分钟内，直接返回路径。");
      return outputPath;
    }
  }
  // 获取图片大小
  const img = await loadImage(bgImagePath);
  const canvas = createCanvas(img.width, img.height);
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.width, img.height);
  const ignoreYArray = [
    {
      min: 1000,
      max: 1500,
    },
  ];

  // 以图片宽度的10%，高度的10% 开始 开始绘制svg ，svg 的大小为24px，margin-right=5,margin-bottom=5;
  const startX = img.width * 0.07;
  const startY = img.height * 0.05;
  const svgSizes = [36, 72, 144]; // 支持的SVG尺寸
  const marginRight = 5;
  const marginBottom = 5;
  const cellSize = 36; // 基础单元格大小改为最小尺寸36px

  // 获取所有svg文件
  const svgFiles = fs.readdirSync(svgDir).filter(file => path.extname(file) === ".svg");
  const usedSvgs = [];

  // 创建一个二维数组来跟踪哪些网格位置已被占用
  // 使用最小单位36px作为网格单位
  const gridWidth = Math.floor((img.width * 0.96 - startX) / (cellSize + marginRight));
  const gridHeight = Math.floor((img.height * 0.95 - startY) / (cellSize + marginBottom));
  const occupancyGrid = Array(gridHeight)
    .fill()
    .map(() => Array(gridWidth).fill(false));

  // 标记忽略区域为已占用
  for (let m = 0; m < ignoreYArray.length; m++) {
    const ignoreY = ignoreYArray[m];
    const gridYStart = Math.max(0, Math.floor((ignoreY.min - startY) / (cellSize + marginBottom)));
    const gridYEnd = Math.min(gridHeight, Math.floor((ignoreY.max - startY) / (cellSize + marginBottom)));
    for (let y = gridYStart; y <= gridYEnd; y++) {
      for (let x = 0; x < gridWidth; x++) {
        occupancyGrid[y][x] = true;
      }
    }
  }

  let index = 0;

  // 检查指定网格位置是否可以放置指定大小的SVG
  function canPlaceSVG(gridX, gridY, size) {
    const cellsNeeded = size === 36 ? 1 : size === 72 ? 2 : 4; // 36px需要1个单元格，72px需要2个，144px需要4个

    // 检查是否超出边界
    if (gridX + cellsNeeded > gridWidth || gridY + cellsNeeded > gridHeight) {
      return false;
    }

    // 检查所有需要的网格单元是否都未被占用
    for (let y = gridY; y < gridY + cellsNeeded; y++) {
      for (let x = gridX; x < gridX + cellsNeeded; x++) {
        if (occupancyGrid[y][x]) {
          return false;
        }
      }
    }

    return true;
  }

  // 标记网格位置为已占用
  function markOccupied(gridX, gridY, size) {
    const cellsNeeded = size === 36 ? 1 : size === 72 ? 2 : 4;
    for (let y = gridY; y < gridY + cellsNeeded; y++) {
      for (let x = gridX; x < gridX + cellsNeeded; x++) {
        occupancyGrid[y][x] = true;
      }
    }
  }

  // 在指定位置放置SVG
  async function placeSVG(svgFile, gridX, gridY, size) {
    // 标记占用区域
    markOccupied(gridX, gridY, size);

    // 计算实际像素坐标
    const x = startX + gridX * (cellSize + marginRight);
    const y = startY + gridY * (cellSize + marginBottom);

    // 生成随机颜色
    const randomColor =
      "#" +
      Math.floor(Math.random() * 16777215)
        .toString(16)
        .padStart(6, "0");

    // 绘制svg
    const svgPath = path.join(svgDir, svgFile);
    console.log(`  using svg ${index++}:${svgPath}`);
    const svgContent = fs.readFileSync(svgPath, "utf8");
    // 替换颜色
    const coloredSvg = svgContent.replace(/stroke="[^"]*"/g, `stroke="${randomColor}"`);

    // 由于canvas不能直接绘制svg，我们需要先将其转换为data URI
    const svgDataUri = "data:image/svg+xml;base64," + Buffer.from(coloredSvg).toString("base64");

    // 绘制到canvas
    const svgImg = await loadImage(svgDataUri);
    ctx.drawImage(svgImg, x, y, size, size);
  }

  // 查找下一个可放置SVG的网格位置
  function findNextPosition() {
    for (let y = 0; y < gridHeight; y++) {
      for (let x = 0; x < gridWidth; x++) {
        if (!occupancyGrid[y][x]) {
          return { gridX: x, gridY: y };
        }
      }
    }
    return null; // 没有更多可用位置
  }

  // 主循环：放置所有SVG
  while (usedSvgs.length < svgFiles.length) {
    // 查找下一个空闲位置
    const position = findNextPosition();
    if (!position) {
      break; // 没有更多可用位置
    }

    // 随机选择SVG大小
    const svgSize = svgSizes[Math.floor(Math.random() * svgSizes.length)];

    // 检查是否可以放置选定大小的SVG，如果不行则尝试更小的尺寸
    let finalSize = svgSize;
    if (!canPlaceSVG(position.gridX, position.gridY, svgSize)) {
      if (canPlaceSVG(position.gridX, position.gridY, 72)) {
        finalSize = 72;
      } else if (canPlaceSVG(position.gridX, position.gridY, 36)) {
        finalSize = 36;
      } else {
        // 标记当前位置为已占用并继续寻找
        occupancyGrid[position.gridY][position.gridX] = true;
        continue;
      }
    }

    // 随机选择一个未使用过的svg
    let randomSvg;
    do {
      randomSvg = svgFiles[Math.floor(Math.random() * svgFiles.length)];
    } while (usedSvgs.includes(randomSvg) && usedSvgs.length < svgFiles.length);

    usedSvgs.push(randomSvg);

    // 在当前位置放置SVG
    await placeSVG(randomSvg, position.gridX, position.gridY, finalSize);
  }
  const buffer = canvas.toBuffer("image/jpeg");
  fs.writeFileSync(outputPath, buffer);

  return outputPath;
}

module.exports = { drawSvg2BackgroundImage };
